<!-- 发布 -->
<template>
	<view>
		<view class="itemone">
			<u-form class="itemwidth" :model="form" ref="uForm"
				:label-style="{'font-size':'24rpx','color':'rgba(56, 56, 56, 1)','height':'30rpx'}">
				<u-form-item label="品种" label-width='100' class="uform" prop="vriety">
					<u-input placeholder="请输入品种" v-model="form.vriety" type="text" height="30"
						placeholder-style="color:rgba(166, 166, 166, 1);font-size:20rpx" />
				</u-form-item>
				<u-form-item label="种类" class="uform" label-width='100' prop="kind">
					<u-input placeholder="请输入种类" v-model="form.kind" type="text" height="30"
						placeholder-style="color:rgba(166, 166, 166, 1);font-size:20rpx" />
				</u-form-item>
				<u-form-item label="重量" class="uform" label-width='100' prop="weight">
					<u-input placeholder="请输入重量(kg)" v-model="form.weight" type="text" height="30"
						placeholder-style="color:rgba(166, 166, 166, 1);font-size:20rpx" />
				</u-form-item>
				<u-form-item label="价格" class="uform" label-width='100' prop="price">
					<u-input placeholder="请输入预期价格(元/kg)" v-model="form.price" type="text" height="30"
						placeholder-style="color:rgba(166, 166, 166, 1);font-size:20rpx" />
				</u-form-item>
				<u-form-item label="姓名" class="uform" label-width='100' prop="name">
					<u-input placeholder="姓名" v-model="form.name" type="text" height="30"
						placeholder-style="color:rgba(166, 166, 166, 1);font-size:20rpx" />
				</u-form-item>
				<u-form-item label="联系方式" class="uform" label-width='150' prop="phone">
					<view class="phonenumber1">
						<u-input placeholder="请输入联系电话" v-model="form.phone" type="number" height="30"
							placeholder-style="color:rgba(166, 166, 166, 1);font-size:20rpx;width:200rpx" />
					</view>
					<u-icon class="phonenumber2" name="../../../static/icon/sends/phonenumber.svg" size="150"
						label-pos="bottom" label-size="20" style="margin-left: 60rpx;"></u-icon>
				</u-form-item>
				<u-form-item label="收货地址" class="uform" label-width='150'>
					<u-input placeholder="收货地址" v-model="form.address" type="select" @click="show_addresspicker()"
						placeholder-style="font-size:20rpx" />
				</u-form-item>
				<u-form-item label="详细地址" label-width='150' class="uform" prop="detail_address">
					<u-input placeholder="请填写详细地址" v-model="form.detail_address" type="text"
						placeholder-style="color:rgba(166, 166, 166, 1);font-size:20rpx" />
				</u-form-item>
				<u-form-item label="备注" label-width='100' label-position="left" prop="remark">
					<u-input placeholder="其他说明" v-model="form.remark" type="textarea" :auto-height='autoHeight'
						placeholder-style="color:rgba(166, 166, 166, 1);font-size:20rpx" />
				</u-form-item>
			</u-form>
		</view>
		<view class="itemtwo">
			<u-form class="itemwidth" :model="form">
				<!-- <u-form-item label="预售" class="uform">
					<u-switch slot="right" active-color="rgba(255, 87, 51, 1)" v-model="switchVal" activeValue=0
						inactiveValue=1 @change="setvalue">
					</u-switch>
				</u-form-item> -->
				<view>
					<u-upload ref="uUpload" max-count="1" :auto-upload="false" :action="action"
						@on-choose-complete="afterReadimg"></u-upload>
					<view class="upload_text">请选择相应图片</view>
				</view>
				<u-form-item label="交货日期" label-width="200" class="uform">
					<view class="date_input">
						<u-input placeholder="请选择日期" v-model="form.delivery_time" type="text" @click="show_timepicker()"
							placeholder-style="color:rgba(166, 166, 166, 1);font-size:20rpx" disabled />
					</view>
				</u-form-item>
			</u-form>
		</view>
		<u-picker v-model="showaddresspicker" mode="region" @confirm="thisaddress"></u-picker>
		<u-picker v-model="showtimepicker" mode="time" @confirm="thistime"></u-picker>
		<button class="send_button" :ripple="true" :hair-line="false" @click="submit()">发布</button>
		<view class="screenheight"></view>
		<u-popup v-model="show" mode="center" border-radius="14" closeable>
<!-- 			<verify>
			</verify> -->
		</u-popup>
	</view>
</template>

<script>
	// import verify from '../../components/verify/verify.vue'
	export default {
		components: {
			// verify
		},
		data() {
			return {
				show: false,
				showaddresspicker: false,
				showtimepicker: false,
				border: true,
				autoHeight: true,
				switchVal: false,
				imagelist: [],
				imageurllist: [],
				sec: 1,
				form: {
					file: '', //图片
					vriety: '', // 品名
					kind: '', // 种类
					weight: '', //重量
					name: '', //联系人
					phone: '', //电话
					price: '', //预期价格
					address: '贵州省黔南布依族苗族自治州长顺县', //收货地址地区
					detail_address: '', //详细地址
					remark: '', // 备注
					delivery_time: '', //交货时间
					// images: [] //图片
				},
				rules: { //验证规则
					vriety: [{
						required: true,
						message: '请填写产品名称',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur']
					}, {
						max: 15,
						message: '最多15个字符',
						trigger: ['change', 'blur']
					}, {
						pattern: /^[a-zA-Z0-9_/.\u4e00-\u9fa5]+$/,
						message: '错误的字符',
						trigger: ['blur']
					}],
					kind: [{
						max: 15,
						message: '最多15个字符',
						trigger: ['change', 'blur']
					}, {
						pattern: /^[a-zA-Z0-9_/.\u4e00-\u9fa5]+$/,
						message: '错误的字符',
						trigger: ['blur']
					}],
					weight: [{
						required: true,
						message: '请填写重量',
						trigger: ['change', 'blur']
					}, {
						pattern: /^[0-9_/.]+$/,
						message: '重量不能为字符',
						trigger: ['change', 'blur']
					}],
					price: [{
						pattern: /^[0-9_/.]+$/,
						message: '请输入数字',
						trigger: ['blur']
					}],
					name: [{
						required: true,
						message: '请填写姓名',
						trigger: ['change', 'blur']
					}, {
						pattern: /^[\u4e00-\u9fa5]+$/,
						message: '请填写正确的名字',
						trigger: ['blur']
					}],
					phone: [{
						required: true,
						message: '请填写联系方式',
						trigger: ['change', 'blur'],
					}, {
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: "手机号格式不正确",
						trigger: ['blur']
					}],
					detail_address: [{
						required: true,
						message: '请填写详细地址',
						trigger: ['change', 'blur']
					}, {
						pattern: /^[a-zA-Z0-9_/.\u4e00-\u9fa5]+$/,
						message: '错误的字符',
						trigger: ['blur']
					}],
					remark: [{
						max: 50,
						message: '最多填写50个字符',
						trigger: ['change', 'blur']
					}, {
						pattern: /^[a-zA-Z0-9_/.\u4e00-\u9fa5,\.，。]+$/,
						message: '错误的字符',
						trigger: ['blur']
					}]
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				}
			}
		},
		methods: {
			afterReadimg(imglist) {
				this.$upLoadfile({
					url: '/upload/imgUpload',
					filePath: imglist[0].url,
					name: 'files'
				}).then(res => {
					if (res.statusCode === 200) {
						// console.log(res);
						let imgurl = JSON.parse(res.data)
						this.form.file = imgurl.data
					}
				})
			},
			submit() {
				console.log(this.form)
				if (this.form.delivery_time != '') {
					this.$refs.uForm.validate(valid => {
						if (valid) {
							let form = this.form
							let need_data = {
								'goodsImgUrl': form.file, //图片地址
								'demandContactNumber': form.phone, //联系电话
								'detailedAddress': form.address + form.detail_address, //地址
								'demandKilogram': form.weight, //重量
								'demandLisisonMan': form.name, //联系人
								'demandPrice': form.price, //价格
								'remarks': form.remark, //备注
								'demandType': form.vriety, //种类
								'demandVarieties': form.kind, //品种
								'deadline': form.delivery_time
							}
							// console.log('验证通过');
							uni.showToast({
								title: '加载中',
								icon: 'loading',
								duration: 2000
							})
							this.$myRequest({
								url: '/demand/addDemand',
								json: 'json',
								method: 'POST',
								data: need_data
							}).then((res) => {
								if (res.data.code == 200) {
									console.log('数据提交成功');
									this.goto('../operatesuccess/operatesuccess')
								}
								if (res.data.code == 500) {
									uni.showToast({
										title: '请修改交货日期',
										icon: 'error',
										duration: 2000
									})
								}
							});

						} else {
							console.log('验证失败');
							return 0;
						}
					});
				} else {
					console.log('test');
					uni.showToast({
						title: '交货时间不能为空',
						icon: 'error'
					});
				}
				this.$refs.uUpload.upload(); // 上传图片、
			},
			//页面跳转
			goto(url) {
				let turl = url + '?delta=3&' + 'successtext=需求发布成功';
				console.log(turl);
				uni.navigateTo({
					url: turl,
					animationType: 'slide-in-right',
					animationDuration: 1000

				})
			},
			thisaddress(e) {
				// console.log(e);
				this.form.address = e.province.label + e.city.label + e.area.label;
				// console.log(this.form.address);
			},
			thistime(t) {
				console.log(t);
				this.form.delivery_time = t.year + '-' + t.month + '-' + t.day;
				// console.log(this.form.delivery_time);
			},
			show_addresspicker() {
				this.showaddresspicker = true
			},
			show_timepicker() {
				// console.log(11111);
				this.showtimepicker = true;
			},
			setvalue(i) {
				this.sec = i;
				// console.log(this.sec);
			},
			defaultinfo() { //默认值


			}
		},
		onLoad() {
			// console.log(12);
			try {
				let userinfo = getApp().globalData.userinfo;
				let time = new Date();
				let today = time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate();
				this.form.delivery_time = today;
				this.form.name = userinfo.userRealName;
				this.form.phone = userinfo.userTel;
				// console.log(userinfo);
				let str = userinfo.userDetailedAddress;
				let ig = this.form.address;
				// console.log(ig);
				let re = new RegExp(ig, "ig"); //生成正则表达式
				// 利用正则表达式过滤出详细地址
				this.form.detail_address = str.replace(re, "");
			} catch {

			}



		},
		onReady() { //生命周期
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>
<style>
	@import url("sends_need.css");
</style>
